<template>
<!-- 树型组件，点X号没有事，不能生成v-model，所以只能 getValue(),setValue() -->
  <div class="topnav-content" :val="value_">
    <div id="orgselect" ref="orgselect" width="200px">
      <Treeselect :options="options"
                  :multiple="false"
                  v-model="orgValue"
                  :load-options="loadOptions"
                  :noChildrenText="onNoChildrenText"
                  :placeholder="placeholder"
                  @select="on_select"
                  @deselect="on_deselect"
      ></Treeselect>
    </div>
  </div>
</template>
<script>
import {queryDepthChildrens} from '@/api/Organization';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import {apiResult} from "@/libs/util";
export default {
  //name: "OrgSelect",
  components: {Treeselect},
  props: {
    value: {type: Number}/*,
    placeholder: {type: String,default () {return "请选择机构"}},
    orgId: {type: Number},
    testValue: {type: Number}*/
  },
  model:{
    prop: 'value',//返回值
    event: "input" //触发此事件返回值
  },
  watch: {
    //传值进来时
    value:{
      immediate: true,
      handler(val) {
        ;//console.log("watch.value: %o",val);
      }
  },
/*    'value' (newValue, oldValue) {

      console.log("watch.value: o%,o%",newValue,oldValue);
      /!*this.orgValue = this.value;*!/
      console.log(newValue);
      if (!!newValue && newValue!=0){
        this.orgValue = this.value.toString();
      }else{
        this.orgValue = null;
      }

    },*/
    'orgId' (newValue, oldValue) {
      //console.log("watch.value: o%,o%",newValue,oldValue);
      /*this.orgValue = this.value;*/
      //console.log(newValue);
      /*if (!!newValue && newValue!=0){
        this.orgValue = this.value.toString();
      }else{
        this.orgValue = null;
      }*/

    },
    'testValue'(newValue, oldValue){
      console.log("watch.testValue: o%,o%",newValue,oldValue);
    },
    orgValue(newValue, oldValue){
      console.log("watch.orgValue: o%,o%",newValue,oldValue);
    }
  },
  computed: {
    //返回结果时
    value_() {
      /*this.$emit('input', Number(this.orgValue));
      return Number(this.orgValue);*/
      this.orgValue = this.value;
      console.log("computed.value_: %o",this.orgValue);
      //console.log("computed.value: %o",this.value);
/*      let v=Number(this.orgValue);
      if (v == 0){v=null;}
      this.$emit('input', v);
      return v;*/
    },
  },

  data () {
    return{
      placeholder: "Organization",
      /** 选中的数据 id 值是id,而非 node */
      orgValue: null,
      options: [],
      onNoChildrenText: "end",
      setCurrentVal: null,
    }
  },
  methods: {
    async loadOptions({ action/*, callback*/ }) {},

    /** 选择 */
    on_select(node, instanceId){ },
    /** 取消选择*/
    on_deselect(node, instanceId){
      console.log("on_deselect: %o",this.orgValue);
    },

    getValue(){
      //console.log("getValue: %o",this.orgValue);
      return this.orgValue;
    },

    setValue(val){
      this.orgValue=val;
    }
  },
  mounted (){
    /** 组织机构 */
    queryDepthChildrens().then(res => {
      apiResult(res.data,false,result=>{
        this.options = result.data;
      });
    });
  }
}
</script>

<style>
.vue-treeselect__control{
  height: 32px;
}
</style>
<style lang="less">
@import "./topnav";
</style>
